<template>

    <div class="card mb-4 shadow-sm">
        <img class="img-fluid" v-bind:src="course.image">
        <div class="card-body">
            <h4>{{course.name}}</h4>
            <p class="card-text">{{course.summary}}</p>
            <div class="d-flex justify-content-between align-items-center">
                <div class="btn-group">
                   <router-link  v-bind:to=" '/detail?id=' + course.id "   class="btn btn-sm btn-outline-secondary">课程详情</router-link>
                </div>
                <span class="badge badge-info"><i class="fa fa-yen" aria-hidden="true"></i>&nbsp;&nbsp;{{course.price}}</span>
                <span class="badge badge-info"><i class="fa fa-user" aria-hidden="true"></i>&nbsp;{{course.enroll}}</span>
                <span class="badge badge-info">{{COURSE_LEVEL | optionKV(course.level)}}</span>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "the-course",
        props:{
            course:{},

        },

        data:function () {
            return{
                COURSE_LEVEL:COURSE_LEVEL

            }
        }
    }
</script>

<style scoped>
    .course h4 {
        font-size: 1.25rem;
        margin: 15px 0;
    }

    .course .text-muted .badge{
        font-size: 1rem;
    }
</style>
